<template>
  <div>
    <el-dialog
        title="创建课程"
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose">
      <div class="create-course">
        <el-form :model="form" ref="form" label-width="100px" :rules="rules">
          <el-tabs type="card" v-model="activeName">
            <el-tab-pane label="基本信息(必填)" name="info">
              <el-form-item label="课程名称" prop="courseName">
                <el-input v-model="form.courseName" placeholder="请输入课程名称" maxlength="50" show-word-limit></el-input>
              </el-form-item>
              <el-form-item label="教学班级" prop="clazz">
                <el-input v-model="form.clazz" placeholder="请输入教学班级" maxlength="30" show-word-limit></el-input>
              </el-form-item>
              <el-form-item label="选择学年-学期" prop="academicYear">
                <el-row>
                  <el-col :span="10">
                    <el-select v-model="form.academicYear" placeholder="请选择学年" class="selectTime">
                      <el-option label="2023-2024" value="2023-2024"></el-option>
                      <el-option label="2024-2025..." value="2024-2025..."></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="10">
                    <el-select v-model="form.semester" class="selectTime">
                      <el-option label="全年" value="全年"></el-option>
                      <el-option label="第一学期" value="第一学期"></el-option>
                      <el-option label="第二学期" value="第二学期"></el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-form-item>
              <span class="senior-set" @click="seniorSet">
                更多信息
                <i class="el-icon-arrow-down" v-if="openStatus == 0"></i>
                <i class="el-icon-arrow-up" v-if="openStatus == 1"></i>
              </span>
              <div class="senior-set-content" v-if="openStatus == 1">
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="授课模式">
                      <el-radio-group v-model="form.mode">
                        <el-radio label="线上">线上</el-radio>
                        <el-radio label="线下">线下</el-radio>
                        <el-radio label="混合">混合</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="学时数">
                      <el-input v-model="form.courseHour" controls-position="right" placeholder="请输入学时数"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="课程介绍">
                  <el-input type="textarea" v-model="form.courseDetail" placeholder="请输入课程介绍"></el-input>
                </el-form-item>
                <el-form-item label="授课地点">
                  <el-input v-model="form.courseLocation" placeholder="请输入授课地点"></el-input>
                </el-form-item>
              </div>

            </el-tab-pane>
            <el-tab-pane label="报名设置" name="enrollment">
              <!-- 报名设置内容 -->
              <div class="app-container">
                <el-form ref="form" :model="form2" label-width="80px">
                  <el-form-item label="报名设置">
                    <el-switch v-model="form2.enrollmentSetting" @click="form2.enrollmentSetting = !form2.enrollmentSetting"></el-switch>
                  </el-form-item>
                  <div v-if="form2.enrollmentSetting==true">
                    <el-form-item label="审核方式">
                      <el-radio-group v-model="form2.reviewMode">
                        <el-radio label="自动审核">自动审核</el-radio>
                        <el-radio label="手动审核">手动审核</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="审核后自动加入标签">
                      <el-select v-model="form2.autoJoinTag" placeholder="请选择">
                        <el-option label="-1" value="-1"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="仅允许机构后台已认证账号加入">
                      <el-switch v-model="form2.allowCertifiedAccounts"></el-switch>
                    </el-form-item>
                    <el-form-item label="报名信息收集">
                      <el-checkbox-group v-model="form2.infoCollection">
                        <el-checkbox label="姓名">姓名</el-checkbox>
                        <el-checkbox label="手机">手机</el-checkbox>
                        <el-checkbox label="学号">学号</el-checkbox>
                        <el-checkbox label="工号">工号</el-checkbox>
                        <el-checkbox label="学校">学校</el-checkbox>
                        <el-checkbox label="公司">公司</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                    <el-button type="primary" @click="submitForm" style="width: 200px">添加问题</el-button>
                  </div>

                </el-form>
              </div>

            </el-tab-pane>
          </el-tabs>
          <div class="buttons">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="submit">确定</el-button>
          </div>
        </el-form>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import {postRequest} from "@/utils/api";

export default {
  name: 'CreateCourse',
  data() {
    return {

      dialogVisible: false,
      activeName: 'info',
      openStatus: 0,
      form: {
        courseName: '',
        clazz: '',
        academicYear: '',
        semester: '',
        mode: 0,
        courseHour: '',
        courseDetail: '',
        courseLocation: '',
        userId:''
      },
      form2: {
        enrollmentSetting: false,
        reviewMode: '自动审核',
        autoJoinTag: '-1',
        allowCertifiedAccounts: false,
        infoCollection: ['姓名', '手机']
      },
      rules: {
        courseName: [
          { required: true, message: '请输入课程名称', trigger: 'blur' }
        ],
        clazz: [
          { required: true, message: '请输入教学班级', trigger: 'blur' }
        ],
        academicYear: [
          { required: true, message: '请选择学年', trigger: 'change' }
        ],
        semester: [
          { required: true, message: '请选择学期', trigger: 'change' }
        ]
      }
    };
  },

  methods: {
    refreshForm() {
      this.form = {
        courseName: '',
        clazz: '',
        academicYear: '',
        semester: '',
        mode: 0,
        courseHour: '',
        courseDetail: '',
        courseLocation: '',
        userId:''
      }
    },
    open(){
      this.dialogVisible = true
    },
    handleClose(done) {
      done();
      this.refreshForm()
    },
    cancel() {
      this.dialogVisible = false;
      this.refreshForm()
      this.$message({
        message: '已取消',
        type: 'warning'
      });
    },
    submitForm() {
      console.log('Form submitted:', this.form);
    },
    submit() {
      this.dialogVisible = false;
      this.$refs.form.validate((valid) => {
        if (valid) {
          // this.$message({
          //   message: '提交成功',
          //   type: 'success'
          // });
          console.log(this.form)
          this.form.userId = JSON.parse(localStorage.getItem('UserInfo')).id;
          postRequest('/userCourse/createClass', this.form).then(res => {
          this.refreshForm()
            console.log(res)
          })
        } else {
          this.$message.error('请检查表单');
        }
      });
    },
    seniorSet() {
      this.openStatus = this.openStatus === 0 ? 1 : 0;
    }
  },
  mounted() {
  }
};
</script>

<style scoped>
.create-course {}

.buttons {
  margin-top: 20px;
  text-align: right;
}

.selectTime {
  margin-left: 50px;
}

.senior-set {
  color: #2092e6;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 15px;
  display: block;
}

.senior-set-content {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 24px;
}
</style>
